<script setup>
import Demo10Component02Children01 from './demo10-component02-children01.vue';
import AA from './demo10-component02-children01.vue';
import Demo10Component02Children02 from './demo10-component02-children02.vue';
import Demo10Component02Children03 from './demo10-component02-children03.vue';
import Demo10Component02Children04 from './demo10-component02-children04.vue';
</script>
<template>
<h2>组件demo10-component02.vue</h2>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册组件</div>
    <div  class="zhtt-demo-card-body">
      大驼峰方式：
      <Demo10Component02Children01></Demo10Component02Children01>
      单词小写，横线分隔：
      <demo10-component02-children01></demo10-component02-children01>
      任意名称：
      <AA></AA>
      任意名称(单词小写，横线分隔)：
      <a-a></a-a>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">通过属性方式，向子组件传值</div>
    <div  class="zhtt-demo-card-body">
      <p class="zhtt-line">
        <demo10-component02-children02 name="name123"></demo10-component02-children02>
      </p>
      <p class="zhtt-line">
        <input type="text" class="zhtt-input" v-model="name">
        <demo10-component02-children02 :name="name"></demo10-component02-children02>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header"> 监听子组件事件</div>
    <div  class="zhtt-demo-card-body">
      <div :style="{ fontSize: postFontSize + 'em' }">
        内容区域，响应事件
      </div>
      <p class="zhtt-line">
        <demo10-component02-children03 @enlarge-text="postFontSize += 0.1"></demo10-component02-children03>
        <demo10-component02-children03 @enlarge-text="updatePostFontSize"></demo10-component02-children03>
        <demo10-component02-children03 @enlargeText="updatePostFontSize"></demo10-component02-children03>
      </p>
    </div>
    <div class="zhtt-demo-card-footer">
      $emit 方法
    </div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header"> 接收子组件事件返回值</div>
    <div  class="zhtt-demo-card-body">
      <div :style="{ fontSize: postFontSize + 'em' }">
        内容区域，响应事件
      </div>
      <p class="zhtt-line">
        <demo10-component02-children04 @enlarge-text="postFontSize += $event"></demo10-component02-children04>
        <demo10-component02-children04 @enlarge-text="updatePostFontSize2"></demo10-component02-children04>
      </p>
    </div>
    <div class="zhtt-demo-card-footer">
      $emit 方法（$event）
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      name:'name111',
      postFontSize:1
    }
  },
  methods:{
    updatePostFontSize(){
      this.postFontSize += 0.1;
    },
    updatePostFontSize2(enlargeAmount){
      this.postFontSize += enlargeAmount;
    }
  }
}
</script>

<style scoped>

</style>